<template>
  <view class="encyclopedia-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">动漫知识百科</text>
      <view class="nav-actions">
        <text class="nav-icon" @click="showSearch">🔍</text>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view v-if="showSearchBar" class="search-section">
      <view class="search-container">
        <input 
          v-model="searchKeyword" 
          class="search-input" 
          placeholder="搜索动漫、角色、声优..."
          placeholder-class="placeholder"
          @input="onSearch"
        />
        <text class="search-clear" @click="clearSearch">×</text>
      </view>
    </view>

    <scroll-view class="content-scroll" scroll-y="true">
      <!-- 分类导航 -->
      <view class="category-section">
        <scroll-view class="category-scroll" scroll-x="true">
          <view class="category-list">
            <view 
              v-for="category in categories" 
              :key="category.value"
              class="category-item"
              :class="{ active: selectedCategory === category.value }"
              @click="selectCategory(category.value)"
            >
              <view class="category-icon">
                <text class="icon-text">{{ category.icon }}</text>
              </view>
              <text class="category-name">{{ category.name }}</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 热门词条 -->
      <view v-if="!searchKeyword" class="hot-section">
        <view class="section-header">
          <text class="section-title">热门词条</text>
          <text class="section-more" @click="viewAllHot">更多</text>
        </view>
        <view class="hot-list">
          <view 
            v-for="(item, index) in hotEntries" 
            :key="item.id"
            class="hot-card"
            @click="viewEntryDetail(item)"
          >
            <view class="hot-rank">
              <text class="rank-text">{{ index + 1 }}</text>
            </view>
            <image class="hot-cover" :src="item.cover" mode="aspectFill"></image>
            <view class="hot-content">
              <text class="hot-title">{{ item.title }}</text>
              <text class="hot-desc">{{ item.description }}</text>
              <view class="hot-stats">
                <text class="stat-item">🔥 {{ item.views }}</text>
                <text class="stat-item">❤️ {{ item.likes }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 知识图谱预览 -->
      <view v-if="!searchKeyword" class="graph-section">
        <view class="section-header">
          <text class="section-title">知识图谱</text>
          <text class="section-more" @click="viewKnowledgeGraph">探索</text>
        </view>
        <view class="graph-preview">
          <view class="graph-node main-node">
            <text class="node-text">动漫作品</text>
          </view>
          <view class="graph-connections">
            <view class="connection-line"></view>
          </view>
          <view class="graph-nodes">
            <view class="graph-node sub-node">
              <text class="node-text">角色</text>
            </view>
            <view class="graph-node sub-node">
              <text class="node-text">声优</text>
            </view>
            <view class="graph-node sub-node">
              <text class="node-text">制作公司</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 词条列表 -->
      <view class="entries-section">
        <view class="section-header">
          <text class="section-title">
            {{ searchKeyword ? '搜索结果' : getCategoryName(selectedCategory) }}
          </text>
          <text v-if="filteredEntries.length > 0" class="section-count">
            {{ filteredEntries.length }} 条
          </text>
        </view>
        
        <view v-if="filteredEntries.length === 0" class="empty-state">
          <text class="empty-icon">📚</text>
          <text class="empty-text">
            {{ searchKeyword ? '没有找到相关词条' : '暂无词条数据' }}
          </text>
        </view>
        
        <view v-else class="entries-list">
          <view 
            v-for="entry in filteredEntries" 
            :key="entry.id"
            class="entry-card"
            @click="viewEntryDetail(entry)"
          >
            <image class="entry-cover" :src="entry.cover" mode="aspectFill"></image>
            <view class="entry-content">
              <text class="entry-title">{{ entry.title }}</text>
              <text class="entry-type">{{ getTypeText(entry.type) }}</text>
              <text class="entry-desc">{{ entry.description }}</text>
              
              <view class="entry-tags">
                <text 
                  v-for="tag in entry.tags.slice(0, 3)" 
                  :key="tag"
                  class="entry-tag"
                >{{ tag }}</text>
                <text v-if="entry.tags.length > 3" class="more-tags">+{{ entry.tags.length - 3 }}</text>
              </view>
              
              <view class="entry-stats">
                <view class="stat-item">
                  <text class="stat-icon">👁️</text>
                  <text class="stat-value">{{ entry.views }}</text>
                </view>
                <view class="stat-item">
                  <text class="stat-icon">❤️</text>
                  <text class="stat-value">{{ entry.likes }}</text>
                </view>
                <view class="stat-item">
                  <text class="stat-icon">💬</text>
                  <text class="stat-value">{{ entry.comments }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="hasMore" class="load-more">
        <button class="load-more-btn" @click="loadMore">
          <text class="btn-text">加载更多</text>
        </button>
      </view>
    </scroll-view>

    <!-- 搜索按钮 -->
    <view v-if="!showSearchBar" class="floating-search" @click="showSearchBar = true">
      <text class="search-float-icon">🔍</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSearchBar: false,
      searchKeyword: '',
      selectedCategory: 'all',
      categories: [
        { value: 'all', name: '全部', icon: '📚' },
        { value: 'anime', name: '动漫作品', icon: '🎬' },
        { value: 'character', name: '角色', icon: '👤' },
        { value: 'voice', name: '声优', icon: '🎤' },
        { value: 'company', name: '制作公司', icon: '🏢' },
        { value: 'genre', name: '类型', icon: '🏷️' },
        { value: 'timeline', name: '时间线', icon: '📅' }
      ],
      hotEntries: [
        {
          id: 1,
          title: '鬼灭之刃',
          type: 'anime',
          description: '大正时期，卖炭少年炭治郎的家人被鬼杀害',
          cover: '/static/anime1.png',
          views: 12500,
          likes: 8900,
          comments: 2300,
          tags: ['热血', '战斗', '奇幻']
        },
        {
          id: 2,
          title: '灶门炭治郎',
          type: 'character',
          description: '鬼灭之刃主角，温柔坚强的少年',
          cover: '/static/character1.png',
          views: 9800,
          likes: 7600,
          comments: 1800,
          tags: ['主角', '温柔', '坚强']
        },
        {
          id: 3,
          title: '花泽香菜',
          type: 'voice',
          description: '日本知名声优，代表作众多',
          cover: '/static/voice1.png',
          views: 7500,
          likes: 5200,
          comments: 1200,
          tags: ['声优', '女性', '知名']
        }
      ],
      entries: [
        {
          id: 4,
          title: '进击的巨人',
          type: 'anime',
          description: '人类为了生存对抗巨人的故事',
          cover: '/static/anime2.png',
          views: 11000,
          likes: 8200,
          comments: 2100,
          tags: ['热血', '战斗', '悬疑', '奇幻']
        },
        {
          id: 5,
          title: '艾伦·耶格尔',
          type: 'character',
          description: '进击的巨人主角，追求自由的少年',
          cover: '/static/character2.png',
          views: 9200,
          likes: 6800,
          comments: 1600,
          tags: ['主角', '热血', '复仇']
        },
        {
          id: 6,
          title: 'MAPPA',
          type: 'company',
          description: '日本动画制作公司，制作众多优秀作品',
          cover: '/static/company1.png',
          views: 6800,
          likes: 4500,
          comments: 900,
          tags: ['制作公司', '动画']
        }
      ],
      hasMore: true
    }
  },
  computed: {
    filteredEntries() {
      let filtered = this.entries
      
      // 分类过滤
      if (this.selectedCategory !== 'all') {
        filtered = filtered.filter(entry => entry.type === this.selectedCategory)
      }
      
      // 搜索过滤
      if (this.searchKeyword) {
        filtered = filtered.filter(entry => 
          entry.title.includes(this.searchKeyword) || 
          entry.description.includes(this.searchKeyword) ||
          entry.tags.some(tag => tag.includes(this.searchKeyword))
        )
      }
      
      return filtered
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showSearch() {
      this.showSearchBar = true
    },
    onSearch() {
      // 搜索逻辑已通过计算属性实现
    },
    clearSearch() {
      this.searchKeyword = ''
      this.showSearchBar = false
    },
    selectCategory(category) {
      this.selectedCategory = category
      this.searchKeyword = ''
    },
    viewAllHot() {
      this.selectedCategory = 'all'
    },
    viewKnowledgeGraph() {
      uni.navigateTo({
        url: '/pages/knowledge-graph/knowledge-graph'
      })
    },
    viewEntryDetail(entry) {
      uni.navigateTo({
        url: `/pages/entry-detail/entry-detail?id=${entry.id}&type=${entry.type}`
      })
    },
    loadMore() {
      // 模拟加载更多数据
      setTimeout(() => {
        this.hasMore = false
        uni.showToast({
          title: '没有更多数据了',
          icon: 'none'
        })
      }, 1000)
    },
    getCategoryName(category) {
      const cat = this.categories.find(c => c.value === category)
      return cat ? cat.name : '全部'
    },
    getTypeText(type) {
      const typeMap = {
        'anime': '动漫作品',
        'character': '角色',
        'voice': '声优',
        'company': '制作公司',
        'genre': '类型',
        'timeline': '时间线'
      }
      return typeMap[type] || '词条'
    }
  }
}
</script>

<style scoped>
.encyclopedia-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E6 0%, #F8F8FF 100%);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 182, 193, 0.3);
}

.nav-back {
  padding: 10rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #FF69B4;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF69B4;
}

.nav-actions {
  padding: 10rpx;
}

.nav-icon {
  font-size: 36rpx;
  color: #FF69B4;
}

.search-section {
  padding: 20rpx 30rpx;
  background: rgba(255, 255, 255, 0.9);
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  height: 80rpx;
  padding: 0 80rpx 0 30rpx;
  background: #FFF;
  border: 2px solid #FFB6C1;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #999;
}

.search-clear {
  position: absolute;
  right: 30rpx;
  font-size: 36rpx;
  color: #999;
  padding: 10rpx;
}

.content-scroll {
  height: calc(100vh - 120rpx);
}

.category-section {
  padding: 30rpx 0;
  background: rgba(255, 255, 255, 0.8);
}

.category-scroll {
  white-space: nowrap;
}

.category-list {
  display: inline-flex;
  padding: 0 30rpx;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
  padding: 20rpx;
  min-width: 120rpx;
  opacity: 0.7;
  transition: all 0.3s;
}

.category-item.active {
  opacity: 1;
  transform: translateY(-10rpx);
}

.category-item.active .category-icon {
  background: linear-gradient(135deg, #FF69B4, #FFB6C1);
  box-shadow: 0 8rpx 20rpx rgba(255, 105, 180, 0.3);
}

.category-icon {
  width: 100rpx